<template>
  <div class="layout">
    <el-container>
      <el-aside width="200px">
        <el-header height="50px"> 学生信息管理系统 </el-header>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#001529"
          @open="handleOpen"
          @close="handleClose"
          :router="true"
        >
          <el-sub-menu index="1">
            <template #title>
              <el-icon><location /></el-icon>
              <span>软件学院全部数据</span>
            </template>
            <el-menu-item-group title="正常学生">
              <el-menu-item index="/normalStudent">正常</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="特殊学生">
              <el-menu-item index="1-3">信息未完善</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-menu-item index="2">
            <el-icon><icon-menu /></el-icon>
            <span>我的成绩</span>
          </el-menu-item>
          <el-menu-item index="3">
            <el-icon><document /></el-icon>
            <span>我的课表</span>
          </el-menu-item>
          <el-sub-menu index="4">
            <template #title>
              <el-icon><location /></el-icon>
              <span>我的信息</span>
            </template>
            <el-menu-item index="/accountMsg">
              <el-icon><setting /></el-icon>
              <span>我的账号信息</span>
            </el-menu-item>
            <el-menu-item index="/schoolMsg">
              <el-icon><setting /></el-icon>
              <span>我的学校信息</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
        <el-footer height="50px">
          <el-icon size="12"><Avatar /></el-icon>
          <div class="logout" @click="logout">
            <span>{{userMsg.nickname}}</span>&nbsp;&nbsp;<span>登出</span>
          </div>
        </el-footer>
      </el-aside>
      <el-main>
        <el-header height="50px"> header </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  Avatar,
} from "@element-plus/icons-vue";
import { ElNotification } from "element-plus";
import { h, onMounted, inject } from "vue";
import {userMsg} from '@/utils';

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

const logout = () => {
  // localStorage.getItem(import.meta.env.VITE_APP_USERMSG)
  // if(import.meta.env.VITE_APP_USERMSG)
  localStorage.removeItem("__login_token__");
  localStorage.removeItem("userMsg");
  ElNotification({
    title: "success",
    message: h("i", { style: "color: teal" }, "登出成功"),
  });
  setTimeout(() => {
    location.reload();
  }, 500);
};

// hook
onMounted(() => {
  console.log(userMsg);
  
  
})
</script>

<style lang="less" scoped>
.layout {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .el-container {
    width: 100%;
    background: rgba(238, 238, 238, 0.308);
    flex: 1;
    .el-aside {
      // width: unset !important;
      color: white;
      background: #001529;
      display: flex;
      flex-direction: column;
      .el-header {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #001529;
        height: 50px;
        padding: 0;
      }
      .el-menu {
        flex: 1;
      }
      .el-footer {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        .logout {
          font-size: 12px;
          cursor: pointer;
        }
      }
      .el-menu {
        // overflow-y: scroll;
        overflow-x: hidden;
        flex: 1;
      }
    }
  }
}
</style>
